<template>
  <view class="page-wrapper">
    <scroll-view 
      class="content-scroll-view" 
      scroll-y="true"
      :show-scrollbar="false"
      enable-flex
    >
      <view class="container">
        <view class="card-list">
          <view class="card-item" @click="navigateToSimulationMode">
            <image class="card-image" :src="bannerLists.one" mode="aspectFill"></image>
            <view class="card-text">虚拟仿真教学实验（训练模式）</view>
          </view>
          <view class="card-item" @click="navigateToExamMode">
            <image class="card-image" :src="bannerLists.one" mode="aspectFill"></image>
            <view class="card-text">虚拟仿真教学实验（考试模式）</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue'
import { bannerLists } from '../../src/dataResource'
onMounted(() => {
  console.log('实战演练页面已加载')
})

// 导航到训练模式
const navigateToSimulationMode = () => {
  uni.navigateTo({
    url: '/pages/practice/simulation-mode',
    fail: (err) => {
      console.error('导航到训练模式失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}

// 导航到考试模式
const navigateToExamMode = () => {
  uni.navigateTo({
    url: '/pages/practice/exam-mode',
    fail: (err) => {
      console.error('导航到考试模式失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped lang="scss">
.page-wrapper {
  height: 100vh;
}

.content-scroll-view {
  height: 100%;
  background-color: #ffffff;
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
}

.container {
  min-height: 100%;
  padding: 30rpx;
  padding-bottom: 150rpx; /* 添加底部内边距以避免内容被底部导航栏遮挡 */
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.card-item {
  width: 100%;
  height: 240rpx;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .card-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-size: 28rpx;
    text-align: center;
  }
}
</style> 